<template>
	<view style="padding: 20rpx 20rpx 80rpx 20rpx;">
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">资产</uni-th>
				<uni-th align="center">金额</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in data.properties" :key="index">
				<uni-td align="center">{{item.propertyName}}</uni-td>
				<uni-td align="center">
					<uni-easyinput v-if="isEdit" type="number" v-model="item.count" placeholder="请输入金额" @change="countChange" />
					<div v-else>{{item.count}}</div>
				</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-td align="center">总资产</uni-td>
				<uni-td align="center">
					<uni-easyinput v-if="isEdit" type="number" v-model="data.total" placeholder="请输入金额" />
					<div v-else>{{data.total}}</div>
				</uni-td>
			</uni-tr>
		</uni-table>
		<div class="btn-box">
			<u-button v-if="!isEdit" size="small" type="primary" @click="isEdit = true" text="修改"></u-button>
			<u-button v-else size="small" type="primary" @click="confirm" text="确定"></u-button>
			<u-button size="small" type="error" @click="deleteDateProperties" text="删除"></u-button>
		</div>
	</view>
</template>

<script>
	import {
		callCloudFunction
	} from '@/api/requests.js'
	export default {
		data() {
			return {
				_id: '',
				isEdit: false,
				data: {},
			}
		},
		methods: {
			getProperties(_id) {
				callCloudFunction('getDateProperties', {
					_id: this._id,
				}, res => {
					this.data = res.result.data[0]
				}, err => {
					uni.showModal({
						content: `查询失败`,
						showCancel: false
					})
				})
			},
			countChange() {
				let total = 0
				for (let i = 0; i < this.data.properties.length; i++) {
					const item = this.data.properties[i]
					total = Number((total + Number(item.count)).toFixed(2))
				}
				this.data.total = total
			},
			deleteDateProperties() {
				callCloudFunction('deleteDateProperties', {
					_id: this._id,
				}, res => {
					uni.showModal({
						content: `已删除`,
						showCancel: false,
						success: function(res) {
							uni.navigateBack({
								delta: 1
							});
						}
					})
				}, err => {
					uni.showModal({
						content: `查询失败`,
						showCancel: false
					})
				})
			},
			confirm() {
				callCloudFunction('updateDateProperties', this.data, res => {
					this.isEdit = false
					uni.showModal({
						content: `修改成功`,
						showCancel: false
					})
				}, err => {
					uni.showModal({
						content: `查询失败`,
						showCancel: false
					})
				})
			}
		},
		onLoad: function(option) {
			this._id = option._id
			this.getProperties()
		},
	}
</script>

<style scoped>
	.btn-box {
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
	}

	.btn-box>* {
		width: 180rpx;
	}
</style>
